<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="12">
                <div>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="档案编号">
                            <el-input v-model="formInline.archiveNumber" placeholder="请输入档案编号" clearable />
                        </el-form-item>
                        <el-form-item>
                            <el-button style="background-color:#5470C6;color: white" @click="Query">分析</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <el-card class="box-card" style="height: 60vh">
                        <template #header>
                            <div class="card-header">
                                <span>分析结果</span>

                            </div>
                        </template>

                        <div style="width: 100%;text-align: left;border: #e1e1e1 1px solid;border-radius: 5px;">
                            <div style="padding: 20px 20px;line-height: 28px" v-if="textarea">
                                <p><span style="font-weight: bold">身份证号：</span>{{healthArchives.idCard}}</p>
                                <p><span style="font-weight: bold">身高：</span>{{healthArchives.height}}</p>
                                <p><span style="font-weight: bold">体重：</span>{{healthArchives.weight}}</p>
                                <p><span style="font-weight: bold">血型：</span>{{healthArchives.bloodType}}</p>
                                <p><span style="font-weight: bold">血糖：</span>{{healthArchives.bloodSugar}}</p>
                                <p><span style="font-weight: bold">血压：</span>{{healthArchives.bloodPressure}}</p>
                                <p><span style="font-weight: bold">心率：</span>{{healthArchives.heartRate}}</p>
                                <p><span style="font-weight: bold">病史：</span>{{healthArchives.medicalHistory}}</p>
                                <p><span style="font-weight: bold">在服药物：</span>{{healthArchives.medication}}</p>
                                <p><span style="font-weight: bold">Ai智能分析：</span><span style="color: #FFB101">暂不支持ai智能分析</span></p>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="12">
                <div id="main2" style="width: 100%;height: 50vh;"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        components: {},
        props: {},
        data() {
            return {
                healthArchives:{},
                textarea:false,
                formInline:{
                    archiveNumber:'',//档案编号
                },
                option : {
                    title: {
                        text: '分析数据表'
                    },
                    legend: {
                        data: ['Allocated Budget', 'Actual Spending']
                    },
                    radar: {
                        // shape: 'circle',
                        indicator: [
                            { name: '年龄', max: 6500 },
                            { name: '体重', max: 16000 },
                            { name: '身高', max: 30000 },
                            { name: '心率', max: 38000 },
                            { name: '血糖', max: 52000 },
                            { name: '血压', max: 25000 }
                        ]
                    },
                    series: [
                        {
                            name: 'Budget vs spending',
                            type: 'radar',
                            data: [
                                {
                                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                                    name: 'Allocated Budget'
                                },
                                {
                                    value: [5000, 14000, 28000, 26000, 42000, 21000],
                                    name: 'Actual Spending'
                                }
                            ]
                        }
                    ]
                }
            };
        },
        watch: {},
        computed: {},
        methods: {
            async Query() {
                console.log(this.healthArchives)
                if (!this.formInline.archiveNumber){
                    return ;
                }
                const {data: res} = await this.$http.get('init/getInitByArchiveNumber',{
                    params:this.formInline,
                });
                console.log(res)
                this.option.series[0].data[0] = res.data.list1;
                this.option.series[0].data[1] = res.data.list2;
                this.init();
                //结果
                this.healthArchives=res.data.healthArchives;
                this.textarea=true;
                // let str="证件号："+healthArchives.idCard+"<br/>身高："+healthArchives.height+"<br/>体重："+healthArchives.weight+"<br/>血型："+healthArchives.bloodType+"<br/>血压："+healthArchives.bloodPressure+
                // "血糖："+healthArchives.bloodSugar+"<br/>心率："+healthArchives.heartRate+"<br/>病史："+healthArchives.medicalHistory+"<br/>在服药物："+healthArchives.medication;
                // this.textarea=str;
            },
            init(){
                let myChart=this.$echarts.init(document.getElementById("main2"));
                myChart.setOption(this.option);
            },
        },
        created() {
        },
        mounted() {
            this.init();
        }
    };
</script>
<style>

</style>
